/*============EFFECTS==============*/
.in, .out {
	-webkit-animation-duration: 0.3s;
}

.out.reverse{
	-webkit-animation-duration: 0.3s;
}

/*@Slide Effect@*/
.slideup.in {
	-webkit-animation-name: slideup;
	z-index: 10;
}

.slideup.out {
	-webkit-animation-name: dontmove;
	z-index: 0;
}

.slideup.out.reverse {
	z-index: 10;
	-webkit-animation-name: slidedown;
}

.slideup.in.reverse {
	z-index: 0;
	-webkit-animation-name: dontmove;
}


@-webkit-keyframes slideup {
    from { -webkit-transform: translateY(100%); }
    to { -webkit-transform: translateY(0); }
}

@-webkit-keyframes slidedown {
    from { -webkit-transform: translateY(0); }
    to { -webkit-transform: translateY(100%); }
}

@-webkit-keyframes dontmove {
    from { opacity: 1; }
    to { opacity: 1; }
}

/*@PopEffect Effect@*/
.pop {
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-duration: 0.3s;
}

.pop.in {
	-webkit-animation-name: popin;
	z-index: 10;
}

.pop1 {
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-duration: 10s;
}

.pop1.in {
	-webkit-animation-name: popin;
	z-index: 10;
}

.pop.out.reverse {
	-webkit-animation-name: popout;
	z-index: 10;
}

.pop.in.reverse {
	z-index: 0;
	-webkit-animation-name: dontmove;
}

@-webkit-keyframes popin {
    from {
        -webkit-transform: scale(.2);
        opacity: 0;
    }
    to {
        -webkit-transform: scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes popout {
    from {
        -webkit-transform: scale(1);
        opacity: 1;
    }
    to {
        -webkit-transform: scale(.2);
        opacity: 0;
    }
}